<!DOCTYPE HTML>
<html lang="zh-CN">

	<head>
		<meta name="generator" content="Hexo 3.9.0">
		<!--Setting-->
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<meta http-equiv="Cache-Control" content="no-transform">
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta name="apple-mobile-web-app-capable" content="LG的博客">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no,email=no,adress=no">
		<meta name="browsermode" content="application">
		<meta name="screen-orientation" content="portrait">
		<meta name="theme-version" content="1.2.3">
		<meta name="root" content="/">

		<!--SEO-->
		<meta name="keywords" content="Docker">
		<meta name="description" content="LG">
		<meta name="robots" content="all">
		<meta name="google" content="all">
		<meta name="googlebot" content="all">
		<meta name="verify" content="all">
		<!--Title-->
		<title>LG的博客 | 文章</title>
		<link rel="alternate" href="/atom.xml" title="LG的博客" type="application/atom+xml">
		<link rel="icon" href="static/picture/favicon2.png">
		<link rel="stylesheet" href="static/css/bootstrap.min.css">
		<link rel="stylesheet" href="static/css/jquery.fancybox.css">
		<link rel="stylesheet" href="static/css/font-awesome.min.css">
		<link rel="stylesheet" href="static/css/style.css">

		<!-- 引入VUE -->
		<script src="static/js/vue.js"></script>

		<!-- CDN引入外部资源axios:用来做请求发送的 -->
		<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>

		<script>
			var _hmt = _hmt || [];
			(function() {
				var hm = document.createElement("script");
				hm.src = "https://hm.baidu.com/hm.js?04983d21727b02deb6771184cf02f865";
				var s = document.getElementsByTagName("script")[0];
				s.parentNode.insertBefore(hm, s);
			})();
		</script>

		<style>
			.center-block{
				width: 100%;
			}
		</style>

	</head>

</html>
<!--[if lte IE 8]>
<style>
    html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->

<body>
<div id="app">
	<nav class="main-navigation">
		<div class="container">
			<div class="row clearfix">
				<div class="col-md-12 column">
					<nav class="navbar navbar-default" style="background-color:#fff;border:0;margin-bottom:0" role="navigation">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                            <span class="sr-only">切</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
							<a class="logo" href="index.html">
								<img src="static/picture/favicon2.png" />LG的博客
							</a>
						</div>

						<div class="collapse navbar-collapse" style="border:0;" id="navbar-collapse-1">
							<ul class="nav navbar-nav">

								<li>
									<a href="index.html">
										<i class="fa fa-home"></i> 首页
									</a>
								</li>

								<li>
									<a href="archives.html">
										<i class="fa fa-sort"></i> 归档
									</a>
								</li>

								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown"
									   data-hover="dropdown">
										<i class="fa fa-fire"></i>
										文章分类
										<strong class="caret"></strong>
									</a>
									<ul class="dropdown-menu">
										<li v-for="(typeStatistics, i) in articleTypeStatistics">
											<a :href="'blogsort.html?' + typeStatistics.id + '###' + typeStatistics.typeName" target="_blank">
												<i class="fa "></i>{{typeStatistics.typeName}}({{typeStatistics.count}})
											</a>
										</li>
									</ul>
								</li>
								<li>
									<a href="/about.html">
										<i class="fa fa-user"></i> 关于我
									</a>
								</li>
							</ul>
						</div>
					</nav>
				</div>
			</div>
		</div>
	</nav>

	<a href="https://gitee.com/colinWu_java/interview" target="_blank">
		<img style="position: absolute; width:100px; top: 0; left: 0; border: 0;" src="static/picture/fork-me.png" alt="Fork me on GitHub">
	</a>

	<section class="content-wrap">
		<div class="container">
			<div class="row">

				<main class="col-md-12 main-content m-post">

					<!--广告图片栏位-->
					<div class="ad">
						<div class="row">
							<div class="col-md-12">
								<a :href="paramObj.ad_url" rel="nofollow" target="_blank">
									<img class="img-responsive center-block" :src="paramObj.ad_1002_url" title="阿里云活动">
								</a>
							</div>
						</div>
					</div>

					<p id="process"></p>
					<article class="post">
						<div class="post-head">
							<h1>
								{{articleDetail.articleName}}
        					</h1>
							<div class="post-meta">
								<span class="categories-meta fa-wrap">
									<i class="fa fa-folder-open-o"></i>
									<a class="category-link" href="">
										{{articleDetail.articleTypeName}}
									</a>
								</span>
								<span class="fa-wrap">
									<i class="fa fa-tags"></i>
									<span class="tags-meta">
											<a class="tag-link" href="">
												{{articleDetail.articleTag}}
											</a>
									</span>
								</span>

								<span class="fa-wrap">
									<i class="fa fa-clock-o"></i>
									<span class="date-meta">
										{{articleDetail.updateTime}}
									</span>
								</span>
							</div>
						</div>

						<div class="post-body post-content" id="container">
							<span v-html="articleDetail.articleContent"></span>
							<div style="border-bottom:1px solid #ebebeb; margin-top: 60px;margin-bottom: 30px;text-align: center;font-size: 30px;">
								END
							</div>
							<h2>相关文章</h2>
							<span v-if="dependentArticles.length > 0">
								<ul v-for="(article, i) in dependentArticles">
									<li>
										<a target="_blank" :href="'blogdetail.html?' + article.id">{{article.articleName}}</a>
									</li>
								</ul>
							</span>
							<span v-else>
								暂无数据
							</span>
						</div>

						<div class="post-footer">
							<div class="col-sm-10">
								<div>
									<b>本文链接</b>：
									<a :href="thisArticleUrl" target="_blank">{{articleDetail.articleName}}</a>
								</div>
								<div>
									转载声明：本博客由LG创作。可自由转载、引用，但需署名作者且注明文章出处。如转载至微信公众号，请在文末添加作者微信二维码。
								</div>
							</div>
							<div class="col-sm-2">
								<img :src="paramObj.user_weixin_url" width=100%/>
							</div>
						</div>

					</article>
				</main>

			</div>
		</div>
	</section>
	<footer class="main-footer">
		<div class="container">
			<div class="row">
			</div>
		</div>
	</footer>

	<a id="back-to-top" class="icon-btn hide">
		<i class="fa fa-chevron-up"></i>
	</a>

	<div class="copyright">
		<div class="container">
			<div class="row">
				<div class="col-sm-12">
					<span>Copyright &copy; 2021 - 2012
                </span> |
					<span>
                    Powered by Colin
                </span> |
					<span>
                    鄂ICP备20013491号-1
                </span>
				</div>
			</div>
		</div>
	</div>
</div>

	<script src="static/js/jquery.min.js"></script>
	<script src="static/js/bootstrap.min.js"></script>
	<script src="static/js/bootstrap-hover-dropdown.min.js"></script>
	<script src="static/js/search.js"></script>
	<script async src="static/js/busuanzi.pure.mini.js"></script>
	<script src="static/js/app.js"></script>
	<script src="static/js/jquery.fancybox.js"></script>
<!-- 引入共用js文件 -->
<script src="static/js/common.js"></script>
	<script type="text/javascript">
		//使用Vue
		let app = new Vue({
			//挂载点
			el: '#app',
			//数据区
			data: {
				dependentArticles: [],
				articleTypeStatistics: [],
				articleDetail: {},
				thisArticleUrl: '',
				paramObj: {},
			},
			//编写函数方法的地方
			methods: {
				//获取文章列表数据
				getArticleDetail() {
					let url = location.href;
					this.thisArticleUrl = url;
					let articleId = url.substr(url.indexOf("?")+1);
					axios.get(getBaseUrl() + '/html/blogArticle/' + articleId, null).then(result => {
						this.articleDetail = result.data.data;
					}).catch(error => {
						console.log(error);
					});
				},

				//获取相关性文章列表数据
				getDependentArticles() {
					let url = location.href;
					let articleId = url.substr(url.indexOf("?")+1);
					axios.get(getBaseUrl() + '/html/blogArticle/getDependentArticles/' + articleId, null).then(result => {
						this.dependentArticles = result.data.data;
					}).catch(error => {
						console.log(error);
					});
				},

				//统计每个文章分类下面文章的数量
				selectArticleTypeStatistics() {
					axios.get(getBaseUrl() + '/html/blogArticleType/selectArticleTypeStatistics', null).then(result => {
						// alert(result)
						this.articleTypeStatistics = result.data.data;
					}).catch(error => {
						console.log(error);
					});
				},
				//获取所有参数信息
				getAllParam() {
					axios.get(getBaseUrl() + '/html/blogParam/getAllParam', null).then(result => {
						this.paramObj = JSON.parse(result.data.data);//JSON字符串转JSON对象
					}).catch(error => {
						console.log(error);
					});
				},
			},
			//钩子函数
			mounted() {
				//获取文章详情
				this.getArticleDetail();
				//获取相关文章数据
				this.getDependentArticles();
				//统计每个文章分类下面文章的数量
				this.selectArticleTypeStatistics();
				//获取所有参数信息
				this.getAllParam();
			}
		})
	</script>

</body>

</html>